import React, { useEffect, useState } from 'react'
import { LeftOutlined } from '@ant-design/icons';
import { zwydingdan } from '../../api/api';
import { Button, Space } from 'antd';
import { useNavigate } from 'react-router-dom';

export default function Dinglist() {
  const [list,setList] = useState([])
  const userid = sessionStorage.getItem('id')
  const navigate = useNavigate()
  useEffect(()=>{
    zwydingdan().then(res=>{
      let a = res.data.filter((item)=>item.user == userid)
      a.forEach(e => {
        e.imgs = JSON.parse(e.imgs)
      });
      setList(a)
    })
  },[])
  console.log(list);
  return (
    <div>
      <header style={{display:'flex',alignItems: 'center',justifyContent: 'space-between',padding:'0 10px',height:'50px'}}>
        <LeftOutlined onClick={()=>{
          navigate('/zhongxin')
        }}/>
        <h4>我的订单</h4>
        <div> </div>
      </header> 
      <div>
        {list.map((item)=>{
          return (
          <div key={item.id} style={{width:'100%',height:'100px',display:'flex',margin:'10px 0 ',justifyContent: 'space-between'}}>
            <div><img src={item.imgs[0]} alt="" style={{height:'100%',width:'120px'}} /></div>
            <div>
              <p>{item.name}</p>
              <p>￥{item.price}</p>
              <p>送达时间:{item.time}</p>
            </div>
            <div>
              <p>{item.song}</p>
              {item.song == '正在配送' ? <Button type="primary" danger onClick={()=>{
                alert('没送到呢，不让评价')
              }}>评价得积分</Button> : <Button type="primary" onClick={()=>{
                item.ping == null||item.ping == ''? navigate(`/pingjia/${item.id}`) : alert('您已评价过')
              }}>评价得积分</Button>}
            </div>
          </div>
        )})}
        

      </div>
    </div>
  )
}
